<template>
  <div style="display: flex;padding-left: 10%">
    <div style="display: flex;justify-content: space-between;">
      <el-input v-model="classname" placeholder="请输入班级名称" style="width: 200px;margin-right: 10px" clearable></el-input>
      <el-input v-model="teachername" placeholder="请输入老师名称" style="width: 200px;margin-right: 10px" clearable></el-input>
    </div>
    <div>
      <el-button @click="search" type="primary">搜索</el-button>
      <el-button @click="dialogVisible=true" type="primary">加入班级</el-button>
    </div>
  </div>
  <div style="display: flex;justify-content: center">
    <el-table
        :data="classData"
        :preserve-expanded-content="preserveExpanded"
        style="width: 80.5%"
        show-overflow-tooltip="true"
        border
    >
      <el-table-column label="序号" width="80" align="center">
        <template #default="scope">
          {{ (currentPage - 1) * pagesize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
          property="classId"
          label="班级编号"
          width="120"
          align="center"
          header-align="center"
      />
      <el-table-column
          property="name"
          label="班级名称"
          width="180"
          align="center"
          header-align="center"
      />
      <el-table-column
          property="teacherName"
          label="老师姓名"
          width="180"
          align="center"
          header-align="center"
      />
      <el-table-column
          property="inviteCode"
          label="邀请码"
          width="180"
          align="center"
          header-align="center"
      />
      <el-table-column
          property="description"
          label="描述"
          width="180"
          align="center"
          header-align="center"
      />
      <el-table-column
          property="status"
          label="状态"
          width="120"
          align="center"
          header-align="center"
      >
        <template #default="scope">
          <p v-if="scope.row.status === 'active'" style="color: dodgerblue">活跃中</p>
          <p v-else style="color: red">已停止</p>
        </template>
      </el-table-column>
      <el-table-column
          property="joinedAt"
          label="加入时间"
          width="180"
          align="center"
          header-align="center"
          :formatter="formatDate"
      />
      <el-table-column
          label="操作"
          width="100"
          align="center"
          header-align="center"
      >
        <template #default="scope">
          <el-button @click="handleDeleteStudent(scope.$index,scope.row.studentId,scope.row.classId)" type="danger" size="small">退出班级</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="flex-box">
    <el-pagination
        v-model:current-page="pageno"
        v-model:page-size="pagesize"
        :page-sizes="[10, 20, 40, 50]"
        :size="size"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
  <el-dialog v-model="dialogVisible" title="请输入班级邀请码" width="30%">
    <el-form>
      <el-form-item>
        <el-input v-model="classInviteCode" placeholder="请输入班级邀请码" style="width: 200px;margin-right: 10px" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="confirm" type="primary">确定加入</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="dialogVisible=false,classInviteCode=''" type="primary">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script setup>
import {GetStudentClass,DeleteStudent,AddStudent} from '../../../api/classc.js'
import {GetAllTeacher} from '../../../api/user.js'
import {ref,onMounted} from 'vue'
import {ElMessage} from "element-plus";
import dayjs from "dayjs";

const currentPage=ref(1)
const pageno=ref(1)
const pagesize=ref(10)
const classname=ref('')
const teachername=ref('')
const total=ref(0)
const preserveExpanded = ref(false)
const classData=ref([{
  classId:'',
  name:'',
  teacherId:'',
  teacherName:'',
  inviteCode:'',
  description:'',
  status:'',
  studentId:'',
  joinedAt:'',
  id:''
}])
const dialogVisible=ref(false)
const classInviteCode=ref('')
const search=()=>{
  GetStudentClass({
    pageno:pageno.value,
    pagesize:pagesize.value,
    classname:classname.value,
    teachername:teachername.value,
    studentId:JSON.parse(localStorage.getItem('userInfo')).userId
  }).then(res=>{
    classData.value=res.data.data.records
    total.value=res.data.data.total
  })
}
const handleSizeChange=(size)=>{
  pagesize.value=size
  search()
}
const handleCurrentChange=(currentPage)=>{
  pageno.value=currentPage
  search()
}
const handleImageError = (e) => {
  e.target.src = 'https://example.com/default-avatar.png'; // 你的默认图地址
}
const handleDeleteStudent=(index,studentId,classId)=>{
  DeleteStudent({
    userId:studentId,
    classId:classId
  }).then(res=>{
    if(res.data.code===200){
      ElMessage.success("退出班级成功")
      search()
    }
  })
}
const confirm=()=>{
  console.log(classInviteCode.value)
  if(classInviteCode.value===''){
    ElMessage.error('请输入班级邀请码')
    return
  }
  dialogVisible.value=false
  AddStudent({
    inviteCode:classInviteCode.value,
    studentId:JSON.parse(localStorage.getItem('userInfo')).userId
  }).then(res=>{
    classInviteCode.value=''
    if(res.data.code===200){
      ElMessage.success(res.data.message)
      search()
    }else{
      ElMessage.error(res.data.message)
    }
  })
}
const formatDate=(row, column, cellValue)=> {
  // 使用 dayjs 格式化日期
  return cellValue ? dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss') : '';
}
onMounted(()=>{
  search()
})

const size = ref('default')
const background = ref(false)
const disabled = ref(false)
</script>
<style lang="less" scoped>
.flex-box{
  display: flex;
  justify-content: center;
}
</style>
